<template>
  <div>
    <div class="title">最近一次修改时间: {{updated_at}}</div>
    <el-form label-width="200px" label-position="left">
      <el-form-item label="最大分销等级">
        <el-select v-model="setForm.highest_level" style="width: 300px" clearable placeholder="请选择分销等级">
          <el-option
            v-for="item in levelList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单次分享所得总积分">
        <el-input type="text" v-model="setForm.total_commission" style="width: 300px" clearable placeholder="请输入"></el-input>
        <span style="color: #8c939d">单次分享所得总积分*兑换比率=单次分享总佣金</span>
      </el-form-item>
      <el-form-item label="一级分销佣金比率">
        <el-input type="text" v-model="setForm.first_ratio" style="width: 300px" clearable placeholder="请输入0-1之间的数字"></el-input>
      </el-form-item>
      <el-form-item label="二级分销佣金比率">
        <el-input type="text" v-model="setForm.secondary_ratio" style="width: 300px" clearable placeholder="请输入0-1之间的数字"></el-input>
      </el-form-item>
      <el-form-item label="三级分销佣金比率">
        <el-input type="text" v-model="setForm.three_ratio" style="width: 300px" clearable placeholder="请输入0-1之间的数字"></el-input>
      </el-form-item>
      <el-form-item label="兑换比率">
        <el-input type="text" v-model="setForm.withdraw_ratio" style="width: 300px" clearable placeholder="请输入0-1之间的数字"></el-input>
      </el-form-item>
      <el-form-item label="单用户总积分上限（选填）">
        <el-input type="text" v-model="setForm.total_integral" style="width: 300px" clearable placeholder="请输入"></el-input>
        <span style="color: #8c939d">默认为无上限</span>
      </el-form-item>
      <el-form-item label="单用户每日积分上限">
        <el-input type="text" v-model="setForm.today_integral" style="width: 300px" clearable placeholder="请输入"></el-input>
        <span style="color: #8c939d">默认为无上限</span>
      </el-form-item>
      <el-form-item label="最低提现积分（选填）">
        <el-input type="text" v-model="setForm.lower_withdraw_integral" style="width: 300px" clearable placeholder="请输入"></el-input>
        <span style="color: #8c939d">默认为不要求</span>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="setDistributionRule">提交</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "distribution_rule",
    data(){
      return{
        setForm:{
          highest_level: '',
          total_commission: '',
          first_ratio: '',
          secondary_ratio: '',
          three_ratio: '',
          withdraw_ratio: '',
          total_integral: '',
          today_integral: '',
          lower_withdraw_integral: ''
        },
        updated_at: '',
        levelList:[
          {label:'一级',value: '1'},
          {label:'二级',value: '2'},
          {label:'三级',value: '3'},
        ],
      }
    },
    mounted(){
      this.getDistributionRule();
    },
    methods:{
      async getDistributionRule(){
        const res = await this.$api.getDistributionRule();
        if (res.data.level == 'success'){
          this.setForm.highest_level = res.data.data.highest_level;
          this.setForm.total_commission = res.data.data.total_commission;
          this.setForm.first_ratio = res.data.data.first_ratio;
          this.setForm.secondary_ratio = res.data.data.secondary_ratio;
          this.setForm.three_ratio = res.data.data.three_ratio;
          this.setForm.withdraw_ratio = res.data.data.withdraw_ratio;
          this.setForm.total_integral = res.data.data.total_integral;
          this.setForm.today_integral = res.data.data.today_integral;
          this.setForm.lower_withdraw_integral = res.data.data.lower_withdraw_integral;
          this.updated_at = res.data.data.updated_at
        }
      },
      async setDistributionRule(){
        const res = await this.$api.setDistributionRule(this.setForm);
        if (res.data.level == 'success'){
          this.$message({
            type: 'success',
            message: res.data.message
          });
          this.getDistributionRule();
        } else {
          this.$message({
            type: 'warning',
            message: res.data.message
          });
        }
      }
    }
  }
</script>

<style scoped lang="scss">
.title{
  padding: 20px 0 50px 0;
}
  .dialog-footer{
   margin-top: 50px;
  }
</style>
